 
/* ---------- */
header{
   background-color: #ccc;
}

section{
	background-color:greenyellow;
 }

 footer{
	background-color:orchid;
 }

/* ---------- */

.grid {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
}

div{
	text-align: center;
	margin: 0 auto;

	/* 设置行高=box的高度，实现文字居中 */
	line-height: 50px;
}

.box {
	min-height: 50px;

	/* 宽度100%的前提：设置在元素的flex-grow参数 */
	width: 100%;
	background-color: orange;
	text-align: center;
}

.grid-cell-1, .grid-cell-2, .grid-cell-3, .grid-cell-4, .grid-cell-5, .grid-cell-6 {
	flex-shrink:1;
	padding:10px;
}

.grid-cell-1{
	flex-grow: 1;
}

.grid-cell-2{
	flex-grow: 2;
}

.grid-cell-3{
	flex-grow: 3;
}
.grid-cell-4{
	flex-grow: 4;
}
.grid-cell-5{
	flex-grow: 5;
}
.grid-cell-6{
	flex-grow: 6;
}

/* -------- */
div.item3{
	height: 500px;
}

div.news{
	height:300px;
}
